<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="keywords"
      />&nbsp;<button @click="clickHandler">Search</button>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return { keywords: "" };
  },
  methods: {
    clickHandler() {
      if (this.keywords.trim() == "") {
        alert("内容不能为空");
        return;
      }

      //通过全局事件总线:将当前组件关键字传递给兄弟组件！！！
      this.$bus.$emit("sendKeywords", this.keywords);

      //给兄弟组件传递完数据，把关键字置空！！！
      this.keywords = "";
    },
  },
};
</script>

<style>
</style>